<template>
    <div>
        <Modal :title="modalTitle" v-model="modalShow" :width="modalWidth" :mask-closable="false" :closable="false">
            <div v-show="modalType === 'edit' || modalType === 'add'">
                <Form ref="formItem" :rules="ruleValidate" label-position="right" :model="formItem" :label-width="130">
                    <!--<FormItem label="文章类别：" prop="category_id">
                        <Select v-model="formItem.category_id" placeholder="请选择文章类别" filterable>
                            <Option v-for="(option, index) in categoryObj" :value="option.id" :key="index">{{option.category}}</Option>
                        </Select>
                    </FormItem>-->
                    <FormItem label="场所名称：" prop="place_name">
                        <Input type="text" maxlength="50" v-model="formItem.place_name" placeholder="请输入场所名称" clearable></Input>
                    </FormItem>
                    <FormItem label="区、县（市）：" prop="area">
                        <Input type="text" maxlength="20" v-model="formItem.area" placeholder="请输入区、县（市）" clearable></Input>
                    </FormItem>
                    <FormItem label="街道：" prop="street">
                        <Input type="text" maxlength="20" v-model="formItem.street" placeholder="请输入街道" clearable></Input>
                    </FormItem>
                    <FormItem label="社区：" prop="community">
                        <Input type="text" maxlength="20" v-model="formItem.community" placeholder="请输入社区" clearable></Input>
                    </FormItem>
                    <FormItem label="详细地址：" prop="place_address">
                        <Input type="textarea" :autosize="{minRows: 2, maxRows: 5}" maxlength="255"
                               v-model="formItem.place_address" placeholder="请输入场所地址" clearable></Input>
                    </FormItem>
                    <!--<FormItem label="经度：" prop="lat">
                        <Input type="text" maxlength="20" v-model="formItem.lat" placeholder="请输入经度" clearable></Input>
                    </FormItem>
                    <FormItem label="纬度：" prop="lan">
                        <Input type="text" maxlength="20"  v-model="formItem.lan" placeholder="请输入纬度" clearable></Input>
                    </FormItem>-->
                    <FormItem label="联系人姓名：" prop="name">
                        <Input type="text" maxlength="20" v-model="formItem.name" placeholder="请输入联系人姓名" clearable></Input>
                    </FormItem>
                    <FormItem label="联系电话：" prop="mobile">
                        <Input type="text" maxlength="20" v-model="formItem.mobile" placeholder="请输入联系电话" clearable></Input>
                    </FormItem>
                    <FormItem label="场所类别：" prop="place_type">
                        <Input type="text" maxlength="100" v-model="formItem.place_type" placeholder="请输入场所类别" clearable></Input>
                    </FormItem>
                </Form>
            </div>
            <div v-show="modalType === 'info'">
                <Form label-position="right" :model="formItem">
                    <Row type="flex" justify="space-between">
                        <Col span="8">
                            <FormItem label="姓名：">
                                {{formItem.name? formItem.name : '无'}}
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="联系电话：">
                                {{formItem.tel? formItem.tel : '无'}}
                            </FormItem>
                        </Col>
                        <Col span="8">
                            <FormItem label="身份证号：">
                                {{formItem.card_no? formItem.card_no : '无'}}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row type="flex" justify="space-between">
                        <Col span="12">
                            <FormItem label="openid：">
                                {{formItem.openid? formItem.openid : '无'}}
                            </FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem label="复核时间：">
                                {{formItem.create_time? formItem.create_time : '无'}}
                            </FormItem>
                        </Col>
                    </Row>
                  <Row type="flex" justify="space-between">
                        <Col span="24">
                            <FormItem label="复核事项：">
                                {{formItem.rereason ? formItem.rereason : '无'}}
                            </FormItem>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <template v-if="modalType === 'edit' || modalType === 'add'">
                    <Button type="text" @click="cancelOption">取消</Button>
                    <Button type="success" @click="saveOption" :loading="btnLoading">保存</Button>
                </template>
                <template v-if="modalType === 'info' || modalType === 'qrcode' || modalType === 'bind'">
                    <Button type="text" @click="cancelOption">关闭</Button>
                </template>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
  updatePlaceInfo,
  findPlacePersonList,
  insertPlacePerson,
  updatePlaceInfoPerson,
  customerSearchUser
} from '@/api/pass'
import { saveExcelData } from '@/api/worker'
// import { formatDate } from '@/components/dateFormat'
export default {
  name: 'optionModal',
  props: {
    modalTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    modalType: {
      type: String,
      default: () => {
        return 'info'
      }
    },
    modalShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    modalWidth: {
      type: Number,
      default: () => {
        return 800
      }
    },
    dataObj: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      ruleValidate: {
        place_name: [
          { required: true, message: '场所名称不能为空', trigger: 'blur' }
        ],
        place_address: [
          { required: true, message: '场所地址不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '联系人姓名不能为空', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '联系电话不能为空', trigger: 'blur' }
        ]
      },
      tableData: [],
      orignalData: [],
      btnLoading: false,
      formItem: {},
      categoryObj: {},
      tableLoading: false,
      codeArr: [] // 二维码临时数组
    }
  },
  methods: {
    cancelOption () {
      this.$emit('cancelOption')
    },
    saveOption () {
      let param = {}
      if (this.modalType === 'add') {
        param = this.formItem
        this.$delete(param, 'id')
      } else if (this.modalType === 'edit') {
        param = this.formItem
      }
      // 临时数据处理
      param.type = 'tour'
      // 数据校验
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          // this.formItem.publish_time = formatDate(this.formItem.publish_time, 'yyyy-MM-dd')
          // console.log('提交表单', this.formItem)
          if (this.modalType === 'add') {
            this.addDataAction(param)
          } else if (this.modalType === 'edit') {
            this.updateDataAction(param)
          }
        } else {
          this.$Message.error({
            content: '操作失败,请核对添加信息后重试'
          })
        }
      })
    },
    updateDataAction (param) {
      this.btnLoading = true
      updatePlaceInfo(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$emit('saveOption')
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    addDataAction (val) {
      this.btnLoading = true
      let arr = []
      const obj = this.$common.xeUtils.clone(val)
      arr.push(obj)
      let param = { type: 'place', dataList: arr }
      saveExcelData(param).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.btnLoading = false
          this.success()
          this.$emit('saveOption')
        } else {
          this.btnLoading = false
          this.error(data)
        }
      })
    },
    resetAction () {
      this.getBindList()
    },
    searchAction () {
      // 数据校验
      if (!this.$common.identityCodeValid(this.formItem.card_no) && !this.formItem.card_no) {
        this.$Message.error('身份证不合法！')
        return false
      }
      // 数据处理
      this.formItem.card_no = this.formItem.card_no && this.formItem.card_no.toString().trim()
      this.btnLoading = true
      customerSearchUser({ card_no: this.formItem.card_no }).then(ret => {
        let data = ret.data
        if (data.errcode === 200) {
          this.btnLoading = false
          if (!this.$common.xeUtils.isEmpty(data.data)) {
            let arr = data.data.list
            arr.forEach(item => {
              item.mobile = item.tel
              item.flag = true
              this.tableData.unshift(item)
            })
          } else {
            this.$Message.error('暂无数据')
          }
          this.tableLoading = false
        } else {
          this.error(data)
          this.btnLoading = false
          this.tableLoading = false
        }
      })
    },
    addAction (row) {
      // 加入场所id
      row.place_id = this.formItem.id
      let flag = true
      this.orignalData.forEach(item => {
        if (item.card_no === row.card_no) {
          flag = false
        }
      })
      if (flag) {
        const param = {
          place_id: row.place_id,
          encryption: row.encryption,
          name: row.name,
          card_no: row.card_no,
          mobile: row.mobile,
          openid: row.openid,
          nickname: row.nickname,
          headimgurl: row.headimgurl
        }
        insertPlacePerson(param).then(res => {
          if (res.data.errcode === 0) {
            this.btnLoading = false
            this.success()
            this.getBindList()
          } else {
            this.btnLoading = false
            this.$Message.error(res.data.errmsg)
          }
        })
      } else {
        this.$Message.error('此人员已存在！')
      }
    },
    delAction (val) {
      this.$Modal.confirm({
        title: '确认删除么？',
        content: '请仔细核对后再操作',
        loading: true,
        onOk: () => {
          this.deleteOne(val)
        }
      })
    },
    deleteOne (val) {
      updatePlaceInfoPerson({ id: val }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$Modal.remove()
          this.success('删除成功')
          this.getBindList()
        } else {
          this.$Modal.remove()
          this.error(data)
        }
      })
    },
    getBindList (row) {
      let place_id = row ? row.id : this.formItem.id
      this.tableLoading = true
      findPlacePersonList({ place_id: place_id }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableData = ret.data.data
          this.orignalData = this.$common.xeUtils.clone(ret.data.data)
          this.tableLoading = false
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    success (val) {
      val = this.$common.xeUtils.isEmpty(val) ? '操作成功' : val
      this.$Message.success(val)
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  mounted () {
    this.getBindList()
  },
  watch: {
    dataObj (val) {
      this.formItem = val
    }
  },
  computed: {}
}
</script>

<style scoped>
    .badge{
        width: 100px;
        height: 100px;
        background: #eee;
        border-radius: 6px;
        display: inline-block;
    }

    .action-btn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>
